<template>
  <div id="hom-page">
    <Slider :banner-list="currentImg"></Slider>
    <BaseInfo></BaseInfo>
    <Evaluate></Evaluate>
    <Tab></Tab>
    <div class="group-consult">
      <div class="consult-more">
        <img src="../../assets/img/Group 3@3x.png">
        <span class="consult-btn">咨询</span>
      </div>   
    </div>
    <div class="group-pay">
      <div class="money-cost">
        <span class="money-logo">¥</span>
        <span class="money-val">{{getBaseMsg.payVal}}</span>
        <span class="money-minimun">起</span>
      </div>
      <div class="pay-btn">
        <span><router-link to="/buy">立即抢购</router-link></span>
      </div>
    </div>
  </div>
</template>

<script>
import sliderImgURL from '../../assets/img/Mask@3x.png'
import Slider from '../../components/slider'
import BaseInfo from '../../components/baseInfo'
import Evaluate from '../../components/evaluate'
import Tab from '../../components/tab'

import {mapGetters, mapActions} from 'vuex'

export default {
  name: 'groupHome',
  components: {
    Slider,
    BaseInfo,
    Evaluate,
    Tab
  },
  data() {
    return {
      currentImg: []
    }
  },
  computed: {
    ...mapGetters([
      'getBaseMsg'
    ])
  },
  mounted(){
    //获取团购信息
    this.getData();
  },
  methods: {
    getImg: function() {
      for(let i = 0; i < 5; i++) {
        this.currentImg[i] = {};
        this.currentImg[i].src = sliderImgURL;
      }
    },
    ...mapActions([
      'getData'
    ])
  },
  created(){
    this.getImg();
    // this.$store.dispatch('getData');
  }
}
</script>

<style scoped lang="scss">
  $horizontalDistance: 1.63rem;
  a{
    color: #fff;
  }
  .group-consult{
    position: fixed;
    right: $horizontalDistance;
    bottom: 6rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 0 solid #D7D7D7;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.20);
    text-align: center;
    .consult-more{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .consult-btn{
        display: block;
        color: #F63;
        font-family: "PingFangSC-Regular";
        font-size: 1.1rem;
        color: #F63;
        letter-spacing: .1rem;
        line-height: 1.1rem;   
      }
    }  
  }
  .group-pay{
    position: fixed;
    bottom: -.2rem;
    z-index: 200;
    width: 100%;
    height: 4rem;
    background: #fff;
    border-top: 1px solid #D7D7D7;
    border-bottom: 1px solid #D7D7D7;
    .money-cost{
      padding-left: $horizontalDistance;
      line-height: 3.6rem;
      .money-logo{
        font-family: ".PingFang-SC-Semibold";
        font-size: 1.28rem;
        color: #F63;
      }
      .money-val{
        font-family: ".PingFang-SC-Semibold";
        font-size: 3.3rem;
        color: #F63;
      }
      .money-minimun{
        font-family: ".PingFang-SC-Regular";
        font-size: 1.1rem;
        color: #999;
      }
    }
    .pay-btn{
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
      width: 8rem;
      text-align: center;
      font-size: 1.64rem;
      line-height: 3.6rem;
      color: #fff;
      background: #f53;
      font-family: ".PingFang-SC-Regular";
    }
  }
 
</style>